/* 
1 Carousel 不能自带轮播的原因 (在于它组件自己的封装)
  1 假如一开始 data是没有数据的 那么 Carousel 无法自动轮播(能显示)
  2 假如一开始 data是有数据 那么 Carousel 可以显示也可以轮播
  3 有真实的轮播图的数据 (条件渲染 )
    才渲染 Carousel 标签即可 

 */



import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';

import nav1 from "../../assets/images/nav-1.png";
import nav2 from "../../assets/images/nav-2.png";
import nav3 from "../../assets/images/nav-3.png";
import nav4 from "../../assets/images/nav-4.png";
// 相对路径的引入
// import CityInput from "../../components/CityInput";
// 绝对路径的引入
import CityInput from "components/CityInput";
import Css from "./index.module.scss";
import { request, baseURL } from "../../utils/request";

console.log("首页");


class Index extends Component {
  state = {
    // 轮播图数组
    swiperList: [],
    imgHeight: 176,
    // 导航数组
    navs: [
      { id: 0, text: "整租", src: nav1 },
      { id: 1, text: "合租", src: nav2 },
      { id: 2, text: "地图找房", src: nav3 },
      { id: 3, text: "去出租", src: nav4 }
    ],
    // 租房小组
    groupList: [],
    // 最新资讯
    newsList: []
  }
  componentDidMount() {
    this.getSwiperList();
    this.getGroupList();
    this.getNewsList();
  }

  // 获取轮播图数据
  getSwiperList() {
    request.get("/home/swiper")
      .then(res => {
        this.setState({ swiperList: res.data.body });
      });
  }
  // 获取租房小组的数据
  getGroupList() {
    request.get("/home/groups")
      .then(res => {
        this.setState({ groupList: res.data.body });
      });
  }
  // 获取最新资讯
  getNewsList() {
    request.get("/home/news")
      .then(res => {
        this.setState({ newsList: res.data.body });
      });
  }

  render() {
    const { swiperList, navs, groupList, newsList } = this.state;
    return (
      <div className={Css.index}>


        {/* 1.0 轮播图 开始 */}
        <div className={Css.index_carousel}>
          <div className={Css.index_city_input}> <CityInput></CityInput></div>
          {swiperList.length && <Carousel
            autoplay
            infinite
          >
            {this.state.swiperList.map(val => (
              <a
                key={val.id}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={baseURL + val.imgSrc}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
          }
        </div>
        {/* 1.0 轮播图 结束 */}

        {/* 2.0 导航 开始 */}
        <div className={Css.index_nav}>
          {navs.map(v => <div className={Css.nav_item} key={v.id} > <img src={v.src}></img><p>{v.text}</p> </div>)}
        </div>
        {/* 2.0 导航 结束 */}

        {/* 3.0 租房小组 开始 */}
        <div className={Css.index_group}>
          <div className={Css.group_title}>
            <span>租房小组</span>
            <span>更多</span>
          </div>
          <div className={Css.group_content}>
            {
              groupList.map(v => <div key={v.id} className={Css.group_item} >
                <div className={Css.group_item_info}>
                  <div className={Css.group_item_title}>{v.title}</div>
                  <div className={Css.group_item_desc}>{v.desc}</div>
                </div>
                <div className={Css.group_item_img}>
                  <img src={baseURL + v.imgSrc} alt="" />
                </div>
              </div>)
            }
          </div>
        </div>
        {/* 3.0 租房小组 结束 */}

        {/* 4.0 最新资讯 开始 */}
        <div className={Css.index_news}>
          <div className={Css.news_title}>最新资讯</div>
          <div className={Css.news_content}>
            {
              newsList.map(v => <div key={v.id} className={Css.news_item} >
                <div className={Css.news_item_img}> <img src={baseURL + v.imgSrc} alt="" /> </div>
                <div className={Css.news_item_info}>
                  <div className={Css.news_item_title}>{v.title}</div>
                  <div className={Css.news_item_desc}>
                    <span className={Css.from}>{v.from}</span>
                    <span className={Css.date}>{v.date}</span>
                  </div>
                </div>
              </div>)
            }
          </div>

        </div>
        {/* 4.0 最新资讯 结束 */}
      </div>
    );
  }
}
export default Index;